import * as React from "react";
import {Star} from "../../types";


interface Props {
    className?: string;
    star: Star;
}

function BaseStarItem({star, className = ''}: Props) {
    const answerList = star.ques_answers
        .split(',')
        .map(s => s.trim());
    const groups: string[][] = [];
    for (let i = 0; i < answerList.length; i += 5) {
        groups.push(answerList.slice(i, i + 5));
    }
    const idList = (star.ques_ids || '')
        .split(',')
        .map(s => s.trim())
        .map(s => Number(s.trim()))
        .filter(n => !isNaN(n));
    const createTime = new Date(star.change_at).toLocaleString();

    return (
        <div className={`mb-2 bg-base-100 text-base-content
                rounded p-4
                hover:bg-base-200 focus:bg-base-300 ${className}`}
        >
            <div className="flex w-full">
                <div className="mr-12">
                    <div className="flex space-x-2 text-lg font-semibold">{star.name}</div>
                    <div className="flex space-x-2 text-sm mt-1">{createTime}</div>
                </div>
                <div className="flex flex-wrap gap-2 font-semibold text-accent">
                    {groups.map((group, index) => (
                        <span key={index}>
                            {group}
                        </span>
                    ))}
                </div>
            </div>

        </div>
    )
}

export default BaseStarItem;